<template>
    <div class="section_common">
        <!-- 课件学习区域 -->
        <div class="detail_info">
            <div class="title">{{courseWare.courseWareName}}</div>
            <div class="userinfo">
                <div class="avatar">
                    <img :src="courseWare.trainerName!=null&&courseWare.trainerName!=''? courseWare.trainerAvatar:trainerAvatar" alt=""/>
                </div>
                <div class="name">讲师：{{courseWare.trainerName!=null&&courseWare.trainerName!=''? courseWare.trainerName : trainerName}}</div>
            </div>
            <div class="lesson_info">
                <span class="lesson_count">学习人次：{{scanCount}}</span>
                <span class="lesson_count">评论数：{{commentList.length}}</span>
            </div>
        </div>
        <div class="study_area" id="study_area">
            <!--<video controls v-if="fileType=='video'" ref="video1">
                <source :src="filePath" type="video/mp4"/>
            </video>-->
            <video-player v-if="fileType=='video'" class="video-player vjs-custom-skin"
                           ref="videoPlayer"
                           :playsinline="true"
                           :options="playerOptions"
                          @play="onPlayerPlay($event)"
                          @pause="onPlayerPause($event)"
                          @ended="onPlayerEnded($event)"
                          @playing="onPlayerPlaying($event)"
                          @timeupdate="onPlayerTimeupdate($event)"
                          @ready="playerReadied($event)"
            ></video-player>
                          <!--@canplay="onPlayerCanplay($event)"-->
            <div v-else class="content_detail" v-html="courseWare.content" style="">

            </div>
            <!-- <div class="word_area">
              <pdf src="../../../assets/1.pdf"></pdf>
            </div> -->
            <!-- <div class="watermark">这是水印</div> -->
            <div>
                <span id="previewClassId" v-show="previewTitle!=''" style="float: left;cursor: pointer" @click="gotoPreview">上一节：{{previewTitle}}</span>
                <span id="nextClassId" v-show="nextTitle!=''" style="float: right;cursor: pointer" @click="gotoNext">下一节：{{nextTitle}}</span>
            </div>
        </div>
        <!-- 下方点赞，评论区域 -->
        <div>
            <div class="good_comment_area">
                <div class="good_area">
                    <div class="goods">
                        <i class="fa fa-thumbs-o-up" :style="praiseStatus==1?'color:orangered ':'color:black' "
                           @click="updateCourseWarePraise"></i>
                        <span>{{praiseCount}}人点赞</span>
                    </div>
                    <div class="goods_member">
                        <img :src="item.avatar" alt="" v-for="item in course_ware_detail.praiseList" :key="item.id">
                    </div>
                </div>

                <div class="comment_area">
                    <div style="width:100%;font-size: 15px;margin: 10px 0 -10px 15px;"><b>Q&A</b></div>
                    <div class="comment_input">
                        <textarea v-model="content" placeholder="说点什么吧"></textarea>
                        <el-button size="mini" type="primary" @click="submitComment(content,'')">提交</el-button>
                    </div>
                    <div class="comment_show_area">
                        <CommentShow :commentData="commentList" @submitComment="submitComment"></CommentShow>
                    </div>
                </div>
                <div class="right_fixed_controller">

                </div>
            </div>
        </div>
        <!-- 右下角点赞和置顶 -->
        <div class="right_bottom_controller">
            <i style="cursor: pointer" v-if="questionCount!=null && questionCount!=0"   @click="getQuestionList()">
                <img width="20px" src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/10/23/1634976928784.png" alt="" />
            </i>
            <i style="cursor: pointer"  v-else>
                <img width="20px" src="http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/10/23/1634976932505.png" alt="" />
            </i>
            <i class="el-icon-s-comment" @click="dialogVisible = true"/>
            <i
                    class="fa fa-thumbs-o-up"
                    :style="praiseStatus == 1 ? 'color:orangered ' : 'color:black'"
                    @click="updateCourseWarePraise"
            ></i>
            <i class="fa fa-arrow-up" @click="backTop"></i>
        </div>
        <!--问答-->
        <el-dialog
                title="课后题"
                :visible.sync="question.questionVisible"
                width="40%"
                :before-close="handleClose1">
            <CourseQuestion :questionList="question.questionList"
                            :finishedExamStatus="question.finish_status"
                            @handleClose="handleClose1"></CourseQuestion>
        </el-dialog>

        <!--评论页面-->
        <el-dialog title="评论" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-input type="textarea" v-model="content"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitComment(content,'')">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 图片预览插件 -->
        <ElImageViewer v-if="preview_image_show" :urlList="detail_image_list" :on-close="closePreview" ></ElImageViewer>
    </div>


</template>

<script>
    // import pdf from "vue-pdf";
    // import {__canvasWM} from "@/util/watermark";
    import {Toast} from "vant";
    // import ckplayer from "../../../../public/ckplayer/ckplayer.js";
    // console.log(ckplayer)

    import CommentShow from "@/components/CommentShow";
    import ElImageViewer from "element-ui/packages/image/src/image-viewer";
    import CourseQuestion from '@/components/CourseQuestion.vue';

    // require("vue-video-player/node_modules/video.js/dist/video-js.css");
    require('video.js/dist/video-js.css')
    require("vue-video-player/src/custom-theme.css");
    import 'video.js/dist/video-js.css'
    import { videoPlayer } from 'vue-video-player'

    export default {
        components: {
            // pdf,
            CommentShow,
            ElImageViewer,
            videoPlayer,
            CourseQuestion,
        },
        mounted() {
            // __canvasWM({
            //     container: document.getElementById("study_area"),
            //     content: "亚声威格所有",
            // });
            this.$nextTick(function () {
                // 添加事件监听
                window.addEventListener("scroll", this.handleScroll);

                document.querySelector(".content_detail").addEventListener("click", (e) => {
                    console.log(e);
                    if (e.target.nodeName == "IMG") {
                        let imgSrc = e.target.currentSrc;
                        if (imgSrc.indexOf("-small") > -1) {
                            imgSrc = imgSrc.replace("-small", "");
                        } else if (imgSrc.indexOf("-mid") > -1) {
                            imgSrc = imgSrc.replace("-mid", "");
                        }
                        let tempIndex = this.detail_image_list.indexOf(imgSrc);
                        let tempList = this.detail_image_list;
                        let tempArr = [];
                        for (let k = 0; k < tempIndex; k++) {
                            tempArr.push(tempList.shift());
                        }
                        this.detail_image_list = [...tempList, ...tempArr];
                        this.preview_image_show = true;
                        this.noScroll();
                    }
                });
            });
            this.timeout = setInterval(this.putLearningObj, 60000)
            this.initC();

        },
        destroyed() {
            // 注销事件监听
            window.removeEventListener("scroll", this.handleScroll);
            // 如果定时器在运行则关闭
            if (this.timeout) {
                clearInterval(this.timeout)
            }
        },
        data() {
            return {
                question: {
                    questionList: [],
                    questionVisible: false,
                    finish_status:0,
                },
                /*问题列表*/
                preview_image_show: false,
                detail_image_list: [], //课件图片list
                submitCheckBtnVisible: false,
                finishedExamStatus: 0,
                dialogVisible: false,
                scrollTop: 0,
                showGoTop: false,
                showFlag: false,
                lessonWareId: this.$route.params.lessonWareId,
                lessonId: this.$route.params.lessonId,
                clickIndex: this.$route.params.clickIndex,
                lessonWareList: JSON.parse(localStorage.getItem("lessonWareList")),
                previewTitle: '',
                previewTitleId: '',
                nextTitle: '',
                nextTitleId: '',
                videoLength:'',
                getCurrentLessonTime:'',
                timeout : '',
                timeout1 : '',
                paused:true,

                trainerName: '',
                trainerAvatar: '',
                currentPage: 1, // pdf文件页码
                pageCount: 100, // pdf文件总页数
                fileType: "", // 文件类型
                src: "", //PDF解析链接
                downLoadSrc: "", //下载链接
                loading: false,
                videoCurrentTime: 0, //视频当前播放时间
                videoOperationTime: 0, //视频拖动进度条后的时间
                getLessonWareDetailUrl: "/mobiles/getLessonWareDetail", //获取用户-课程-课件的信息
                saveCurrentScheduleUrl: "/mobiles/saveOrUpdateLessonSchedule", //保存当前进度
                savePdfStatusUrl:"/mobiles/savePdfStatusUrl",
                getLessonWareScheduleuRL: "/mobiles/getLessonWareSchedule", //获取当前用户课程课件的学习进度
                updateCourseWarePraiseUrl: "/mobiles/courseWarePraise", //点赞url
                getCourseWareCommentUrl: '/mobiles/getCourseWareComment', //获取回复列表
                courseWareReplyUrl: '/mobiles/courseWareReply',// 回复接口
                lessonWareSchedule: {},
                lessonWareName: "课程详情",
                finishedVedioStudy: false,
                firstEnter: true,
                hasUpdate: false,
                courseWare: {},  //课件
                courseStudyStatus: {}, //学习记录
                filePath: '', //文件路径
                praiseCount: 0,
                praiseStatus: 0,
                current: 1, //评论页数
                commentList: [], // 评论列表
                content: '', //评论内容
                scanCount: 0,
                questionCount: '',
                getCourseQuestionListUrl: '/mobilesPost/getCourseQuestionList', //课程问题列表
                course_ware_detail: {},
                userInfo: JSON.parse(localStorage.getItem("userInfo")),

                curTime:'0',//当前时间点
                resetTime:'0',//重置时间点
                options: {
                    playbackRates: [0.5, 1.0, 1.5, 2.0, 3.0], // 可选的播放速度
                    autoplay: true, // 是否自动播放
                    muted: false, // 是否静音
                    loop: true, // 是否开启循环播放
                    preload: "auto", // 自动预加载
                    language: "zh-CN", // 语言，'en', 'zh-cn', 'zh-tw'
                    aspectRatio: "16:9", // 播放器高宽占比（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [
                        {
                            type: "video/mp4", // 类型
                            src:
                                "https://mp4i.vodfile.m1905.com/202011280727/c884af78f3467d3e7d65804b40c74771/video/2020/11/26/v20201126Z7OID3M29Z1FF6G3/v20201126Z7OID3M29Z1FF6G3.mp4", // url地址
                        },
                    ],
                    poster:
                        "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606462956126&di=2d87964d4faf656af55d09d938640d97&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2F201310%2F10%2F150326y7dzdd8d4kpjjdsd.jpg", // 封面地址
                    notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true, // 是否显示当前时间和持续时间的分隔符，"/"
                        durationDisplay: true, // 是否显示持续时间
                        remainingTimeDisplay: false, // 是否显示剩余时间
                        fullscreenToggle: true, // 是否显示全屏按钮
                    },
                },
                playerOptions : {
                    // playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
                    autoplay: true, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        src: '',  // 路径
                        type: 'video/mp4'  // 类型
                    }],
                    // poster: "../../static/images/test.jpg", //你的封面地址
                    // width: document.documentElement.clientWidth,
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: {
                        timeDivider: true, // 是否显示当前时间和持续时间的分隔符，"/"
                        durationDisplay: true, // 是否显示持续时间
                        remainingTimeDisplay: false, // 是否显示剩余时间
                        fullscreenToggle: true, // 是否显示全屏按钮
                    }
                }

            };
        },
        watch:{
            '$route'(){
                this.$router.go(0);
                /*this.initC();
                this.stopContextMenu();
                this.getLessonWareDetail();
                // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
                /!* this.src = pdf.createLoadingTask(this.src);*!/
                this.getPreviousAndNextTitle();*/

            }
        },
        created() {
            // this.stopContextMenu();
            this.getLessonWareDetail();
            // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
            /* this.src = pdf.createLoadingTask(this.src);*/
            this.getPreviousAndNextTitle();
        },
        methods: {
            //关闭
            handleClose1() {
                this.$confirm('确认关闭？')
                    .then(() => {
                        this.question.questionVisible = false;
                    })
                    .catch(() => {
                    });
            },
            detailParentClose() {
                this.question.questionVisible = false;
            },
            //问答列表
            getQuestionList() {
                // console.log(item)
                var that = this;
                // that.question.finish_status = item.finish_status;

                this.$https.post(that.getCourseQuestionListUrl, {
                    user_id: JSON.parse(localStorage.getItem("userInfo")).userId,
                    associatedId: that.lessonWareId,
                    pageType : 2
                })
                    .then(res => {
                        // console.log(res.data.data);
                        that.question.questionVisible = true

                        that.question.questionList = res.data.data;
                        that.question.finish_status = res.data.data[0].finishStatus;
                    })
            },
            putLearningObj () {
                if (!this.paused){
                    var that = this;
                    that.$https.post(that.saveCurrentScheduleUrl,{
                        userAccount: that.userInfo.userId,
                        lessonId: that.lessonId,
                        lessonWareId: that.lessonWareId,
                        currentSchedule: that.curTime,
                        totalSchedule: that.videoLength
                    })
                        /*.then((res) => {
                        console.log(res)
                    })*/
                }

            },
            // 播放回调
            onPlayerPlay(player) {
                this.paused = false;
                console.log("player play!", player);
            },
            // 暂停回调
            onPlayerPause(player) {
                console.log("player pause!", player);
                this.paused = true;
                var that = this;
                that.$https.post(that.saveCurrentScheduleUrl,{
                    userAccount: that.userInfo.userId,
                    lessonId: that.lessonId,
                    lessonWareId: that.lessonWareId,
                    currentSchedule: that.curTime,
                    totalSchedule: that.videoLength
                })
            },
            // 视频播完回调
            onPlayerEnded(player) {
                this.paused = false;
                console.log(player);
                this.putLearningObj()
            },

            // 已开始播放回调
            onPlayerPlaying(player) {
                this.paused = false;
                console.log(player);
                //等两秒去保存当前进度
                /*setTimeout(function () {
                    var that = this;
                    that.$https.post(that.saveCurrentScheduleUrl,{
                        userAccount: that.userInfo.userId,
                        lessonId: that.lessonId,
                        lessonWareId: that.lessonWareId,
                        currentSchedule: that.curTime,
                        totalSchedule: that.videoLength
                    }).then((res) => {
                        console.log(res)
                        console.log("等两秒去保存当前进度")
                    })
                }, 2000)*/
            },

            // 当前播放位置发生变化时触发。
            onPlayerTimeupdate(player) {
                // console.log(player);
                this.curTime = player.cache_.currentTime;
                this.videoLength = player.cache_.duration;

                var status = this.courseStudyStatus.studyStatus;
                if (status == 0){
                    //未完成---设置不能快进
                    // curTime = player.cache_.currentTime
                    var apartTime = this.curTime - this.resetTime
                    console.log(apartTime);
                    if (apartTime > 1) {
                        player.currentTime(this.resetTime)
                    } else {
                        this.resetTime = this.curTime
                    }
                }
            },
            onPlayerCanplay(){
                let ua = navigator.userAgent.toLocaleLowerCase()
                console.log(ua)
                // x5内核
                if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
                    console.log(11111111)
                   /* $('body').find('video')
                        .attr('x-webkit-airplay', 'true')  //设置允许设备播放
                        .attr('x5-playsinline', 'true')  // 设置android在微信中内联播放视频

                        .attr('x5-video-player-type','web') // 关闭同层X5内核播放器    x5-video-player-type='h5' 启用Ｈ5同层播放器
                        // .attr('x5-video-player-fullscreen','true')  // 进入全屏通知
                        .attr('x5-video-orientation','portrait')  //控制横竖屏 可选值： landscape 横屏, portraint竖屏  默认值：portraint*/
                } else {
                    console.log(222222222)
                    // ios端
                    // alert('ios')
                    /*$('body').find('video')
                        .attr('webkit-playsinline', 'true')  //设置ios在微信中内联播放视频 ios9
                        .attr('playsinline', 'true')    //设置ios在微信中内联播放视频 ios10/ios11*/
                }
            },

            //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
            playerReadied(player) {
                //视频开始的时候查看
                var that = this;
                that.$https.post(that.getLessonWareScheduleuRL,{
                    userAccount: that.userInfo.userId,
                    lessonId: that.lessonId,
                    lessonWareId: that.lessonWareId,
                    totalSchedule: that.videoLength
                }).then((res) => {
                    // that.getCurrentLessonTime = res.data
                    // var getCurTime = that.getCurrentLessonTime; //通过接口获取当前视屏播放的时间点  that.get('//asfasf',{})
                    // player.cache_.currentTime = res.data;
                    //设置视频开始时间
                    player.currentTime(res.data)
                    //设置重置时间
                    that.resetTime = res.data;
                    Toast(`已从${res.data} 开始播放`)//黑框提示时间点
                })
            },
            initC(){
                if (this.fileType !== "" && this.fileType !== 'video' && this.courseWare.content.indexOf("video") == -1){
                    var that = this;
                    that.$https.post(that.savePdfStatusUrl,{
                        userAccount: that.userInfo.userId,
                        lessonId: that.lessonId,
                        lessonWareId: that.lessonWareId,
                    })
                }

            },
            tt() {
                var vd1 = document.getElementsByTagName("video")[0] //获取video对象
                var videoLength = vd1.duration;
                console.log(videoLength)
            },
            gotoPreview(){
                console.log(1111111)
                var toUrl = `/train/study/detail/${this.lessonId}/${this.previewTitleId}/${this.clickIndex -1}`;
                this.$router.push(toUrl);
                // this.$router.push("/train/study/detail/lessonId="+this.lessonId+"/lessonWareId="+this.previewTitleId);

            },
            gotoNext(){
                console.log(22222222)
                var toUrl = `/train/study/detail/${this.lessonId}/${this.nextTitleId}/${Number(this.clickIndex) + Number(1)}`;
                this.$router.push(toUrl);
            },
            getPreviousAndNextTitle() {
                var that = this;
                var lessonLength = this.lessonWareList.length;
                // console.log(this.lessonWareList[this.clickIndex]);
                // console.log(this.clickIndex);
                // console.log(this.clickIndex + 1);
                // console.log(lessonLength);
                if (that.clickIndex != -1){
                    if (that.clickIndex == 0){
                        this.previewTitle = '';
                        // document.getElementById("previewClassId").style.display= "";
                        // document.getElementById("nextClassId").style.display= "";
                        this.nextTitle = that.lessonWareList[1].courseWareName;
                        this.nextTitleId = that.lessonWareList[1].id
                    }else if (this.clickIndex == lessonLength - 1){
                        // document.getElementById("previewClassId").style.display= "";
                        this.previewTitle = that.lessonWareList[lessonLength - 2].courseWareName;
                        this.previewTitleId = that.lessonWareList[lessonLength - 2].id;
                        this.nextTitle = '';
                    }else {
                        // document.getElementById("previewClassId").style.display= "";
                        // document.getElementById("nextClassId").style.display= "";
                        this.previewTitle = that.lessonWareList[that.clickIndex - 1].courseWareName;
                        this.previewTitleId = that.lessonWareList[that.clickIndex - 1].id;
                        this.nextTitle = that.lessonWareList[Number(that.clickIndex) + Number(1)].courseWareName;
                        this.nextTitleId = that.lessonWareList[Number(that.clickIndex) + Number(1)].id;

                    }
                }

            },
            //禁止右键
            stopContextMenu() {
                //禁止鼠标右键菜单
                document.oncontextmenu = function () {
                    return false;
                };
            },
            //评论关闭
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(() => {
                        done();
                    })
                    .catch(() => {
                    });
            },

            handleScroll() {
                // 判断相对滚动位置，下滑280px 时显示按钮
                this.scrollTop = window.pageYOffset || document.body.scrollTop;
                if (this.scrollTop > 180) {
                    this.showGoTop = true;
                } else {
                    this.showGoTop = false;
                }
            },
            // 返回顶部,加计时器是为了过渡顺滑
            backTop() {
                document.documentElement.scrollTop = document.body.scrollTop = 0;
            },
            //提交评论
            submitComment(comment_content, comment_pid) {
                var that = this;
                this.$https
                    .post(that.courseWareReplyUrl, {
                        user_id: that.userInfo.userId,
                        course_id: that.lessonId,
                        course_ware_id: that.lessonWareId,
                        content: comment_content,
                        pid: comment_pid,
                    })
                    .then(() => {
                        that.dialogVisible = false;
                        that.content = '';
                        that.current = 1;
                        this.getCourseWareComment();

                    })
                    .catch((err) => {
                        console.log(err);
                    });


            }
            ,
            //评论列表 一层
            getCourseWareComment() {
                var that = this;
                this.$https
                    .post(that.getCourseWareCommentUrl, {
                        user_id: that.userInfo.userId,
                        course_id: that.lessonId,
                        course_ware_id: that.lessonWareId,
                        current: that.current,
                    })
                    .then((res) => {
                        that.commentList = res.data.data.records;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
            ,
            //点赞
            updateCourseWarePraise() {
                var that = this;
                this.$https
                    .post(that.updateCourseWarePraiseUrl, {
                        user_id: that.userInfo.userId,
                        course_id: that.lessonId,
                        course_ware_id: that.lessonWareId,
                    })
                    .then((res) => {
                        that.praiseCount = res.data.data.praiseCount;
                        that.praiseStatus = res.data.data.status;
                        if (that.praiseStatus == 1) {
                            that.$message({
                                showClose: true,
                                message: '已点赞',
                                type: 'success'
                            });
                        } else {
                            that.$message({
                                showClose: true,
                                message: '取消点赞'
                            });
                        }
                    }).catch((err) => {
                    console.log(err);
                });
            }
            ,
            //获取课件信息
            getLessonWareDetail() {
                var that = this;
                this.$https
                    .post(that.getLessonWareDetailUrl, {
                        user_id: that.userInfo.userId,
                        course_id: that.lessonId,
                        course_ware_id: that.lessonWareId,
                        currentSchedule: that.currentPage, //当前进度 用于判断是否完成学习
                        totalSchedule: that.pageCount, //总进度
                        current: that.current,
                    })
                    .then((res) => {
                        that.course_ware_detail = res.data.data;
                        that.scanCount = that.course_ware_detail.scanCount;
                        that.questionCount = that.course_ware_detail.questionCount;
                        that.filePath = that.course_ware_detail.fullPath;
                        that.courseStudyStatus = that.course_ware_detail.courseStudyStatus;
                        that.fileType = that.matchType(that.course_ware_detail.fullPath);
                        that.courseWare = that.course_ware_detail.courseWare;
                        that.praiseCount = that.course_ware_detail.praiseCount;
                        that.praiseStatus = that.course_ware_detail.status;
                        that.commentList = that.course_ware_detail.commentDate.data.records;
                        that.trainerName = that.course_ware_detail.trainer_name;
                        that.trainerAvatar = that.course_ware_detail.trainer_avatar;
                        that.finishedExamStatus = this.course_ware_detail.questionFinishStatus;
                        //视频链接
                        that.playerOptions.sources[0].src = that.filePath
                        // that.getDetailImage();
                        this.initC();
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            },
            //关闭预览
            closePreview(){
                this.preview_image_show = false;
                this.canScroll()
            },
            //获取文中图片
            getDetailImage() {
                let imgReg = /<img.*?(?:>|\/>)/gi; //匹配图片中的img标签
                let srcReg = /src=[\\'\\"]?([^\\'\\"]*)[\\'\\"]?/i; // 匹配图片中的src
                let arr = this.courseWare.content.match(imgReg);
                this.detail_image_list = [];
                for (let k = 0; k < arr.length; k++) {
                    let tempSrc = arr[k].match(srcReg)[1];
                    if (tempSrc.indexOf("-small") > -1) {
                        tempSrc = tempSrc.replace("-small", "");
                    } else if (tempSrc.indexOf("-mid") > -1) {
                        tempSrc = tempSrc.replace("-mid", "");
                    }
                    this.detail_image_list.push(tempSrc);
                }
            },
            // 根据文件名后缀区分 文件类型
            /*
             * @param: fileName - 文件名称
             * @param: 数据返回 1) 无后缀匹配 - false
             * @param: 数据返回 2) 匹配图片 - image
             * @param: 数据返回 3) 匹配 txt - txt
             * @param: 数据返回 4) 匹配 excel - excel
             * @param: 数据返回 5) 匹配 word - word
             * @param: 数据返回 6) 匹配 pdf - pdf
             * @param: 数据返回 7) 匹配 ppt - ppt
             * @param: 数据返回 8) 匹配 视频 - video
             * @param: 数据返回 9) 匹配 音频 - radio
             * @param: 数据返回 10) 其他匹配项 - other
             */
            matchType(fileName) {
                // 后缀获取
                var suffix = "";
                // 获取类型结果
                var result = "";
                try {
                    var flieArr = fileName.split(".");
                    suffix = flieArr[flieArr.length - 1];
                } catch (err) {
                    suffix = "";
                }
                // fileName无后缀返回 false
                if (!suffix) {
                    result = false;
                    return result;
                }
                // 图片格式
                var imglist = ["png", "jpg", "jpeg", "bmp", "gif"];
                // 进行图片匹配
                result = imglist.some(function (item) {
                    return item == suffix;
                });
                if (result) {
                    result = "image";
                    return result;
                }
                // 匹配txt
                var txtlist = ["txt"];
                result = txtlist.some(function (item) {
                    return item == suffix;
                });
                if (result) {
                    result = "txt";
                    return result;
                }
                // 匹配 excel
                var excelist = ["xls", "xlsx"];
                result = excelist.some(function (item) {
                    return item == suffix;
                });
                if (result) {
                    result = "excel";
                    return result;
                }
                // 匹配 word
                var wordlist = ["doc", "docx"];
                result = wordlist.some(function (item) {
                    return item == suffix;
                });
                if (result) {
                    result = "word";
                    return result;
                }
                // 匹配 pdf
                var pdflist = ["pdf"];
                result = pdflist.some(function (item) {
                    return item == suffix;
                });
                if (result) {
                    result = "pdf";
                    return result;
                }
                // 匹配 ppt
                var pptlist = ["ppt"];
                result = pptlist.some(function (item) {
                    return item == suffix;
                });
                if (result) {
                    result = "ppt";
                    return result;
                }
                // 匹配 视频
                var videolist = ["mp4", "m2v", "mkv"];
                result = videolist.some(function (item) {
                    return item == suffix;
                });
                if (result) {
                    result = "video";
                    return result;
                }
                // 匹配 音频
                var radiolist = ["mp3", "wav", "wmv"];
                result = radiolist.some(function (item) {
                    return item == suffix;
                });
                if (result) {
                    result = "radio";
                    return result;
                }
                // 其他 文件类型
                result = "other";
                return result;
            }
            ,
        },
        updated() {
            /*this.$nextTick(()=>{
                var that = this
                var resetTime = 0 // 拖动后重置播放时间
                var curTime = 0 // 当前播放时间
                var vd = document.getElementsByTagName("video")[0] //获取video对象
                setTimeout(()=> {
                    that.videoLength  = vd.duration
                    console.log(that.videoLength)
                    if (that.videoLength != 'Nan' && that.videoLength != ''){
                        vd.play();
                        vd.addEventListener("play", function () {
                            that.$https.post(that.getLessonWareScheduleuRL,{
                                userAccount: that.userInfo.userId,
                                lessonId: that.lessonId,
                                lessonWareId: that.lessonWareId,
                                totalSchedule: that.videoLength
                            }).then((res) => {
                                // console.log(res.data)
                                that.getCurrentLessonTime = res.data
                                var getCurTime = that.getCurrentLessonTime; //通过接口获取当前视屏播放的时间点  that.get('//asfasf',{})
                                curTime = getCurTime
                                resetTime = getCurTime
                                /!*if (getCurTime > 0.1) {
                                    curTime = getCurTime
                                    resetTime = getCurTime
                                     vd.play()
                                     vd.addEventListener("play", function () {
                                         setTimeout(function () {
                                             vd.currentTime = getCurTime
                                             // console.log(`已从${getCurTime} 开始播放`)//黑框提示时间点
                                             Toast(`已从${getCurTime} 开始播放`)//黑框提示时间点
                                             setInterval(timer, 2000)
                                         }, 500)
                                     })
                                } else {
                                    vd.play()
                                    that.timeout = setInterval(timer, 2000)
                                }*!/
                            })
                            setTimeout(function () {
                                vd.currentTime = curTime
                                // console.log(`已从${getCurTime} 开始播放`)//黑框提示时间点
                                if (curTime > 0.1) {
                                    Toast(`已从${curTime} 开始播放`)//黑框提示时间点
                                    that.timeout1 =  setInterval(timer, 2000)
                                }else {
                                    vd.play()
                                    that.timeout = setInterval(timer, 2000)
                                }
                            }, 500)
                        })


                    }
                },800);

                // var getCurTime = localStorage.getItem("remTime") //通过接口获取当前视屏播放的时间点  that.get('//asfasf',{})
                vd.addEventListener("pause", function () {
                    // localStorage.setItem("remTime", that.curTime)
                    clearInterval(that.timeout1)
                    clearInterval(that.timeout)
                    console.log(33333333333333)
                    that.$https.post(that.saveCurrentScheduleUrl,{
                        userAccount: that.userInfo.userId,
                        lessonId: that.lessonId,
                        lessonWareId: that.lessonWareId,
                        currentSchedule: curTime,
                        totalSchedule: that.videoLength
                    }).then((res) => {
                        console.log(res)
                    })
                })

                // 定时器
                function timer() {
                    curTime = vd.currentTime
                    var apartTime = curTime - resetTime
                    if (apartTime > 2) {
                        vd.currentTime = resetTime
                    } else {
                        resetTime = curTime
                    }
                    // that.curTime = curTime

                    console.log(22222222222)

                    //这里写ajax存当前的视屏的播放时间
                    //ajax  axios  {id,curTime,user}
                    that.$https.post(that.saveCurrentScheduleUrl,{
                        userAccount: that.userInfo.userId,
                        lessonId: that.lessonId,
                        lessonWareId: that.lessonWareId,
                        currentSchedule: curTime,
                        totalSchedule: that.videoLength
                    }).then((res) => {
                        console.log(res)
                    })
                }


            })*/

            /*var that = this;
            switch (this.fileType) {
                case "video":
                    var myVideo = this.$refs.video1;
                    myVideo.oncanplay = function () {
                        console.log("准备就绪");
                        let data = JSON.parse(localStorage.getItem("lessonChapter")) || {};
                        if (data[this.lessonWareId]) {
                            this.currentPage = data[this.lessonWareId];
                        } else {
                            if (
                                that.lessonWareSchedule.currentSchedule != null ||
                                that.lessonWareSchedule.currentSchedule > 0
                            ) {
                                that.currentPage = that.lessonWareSchedule.currentSchedule;
                            } else {
                                that.currentPage = 1;
                            }
                        }
                        console.log(Math.floor(myVideo.duration));
                        that.pageCount = Math.floor(myVideo.duration);
                        if (that.firstEnter) {
                            myVideo.currentTime = that.currentPage; //第一次加载初始化上次学习进度
                            that.firstEnter = false;
                        }
                    };
                    //监听播放开始
                    myVideo.addEventListener("play", function () {
                        console.log("开始播放");
                    });
                    //监听播放暂停
                    myVideo.addEventListener("pause", function () {
                        console.log("播放暂停");
                    });
                    //监听播放结束
                    myVideo.addEventListener("ended", function () {
                        console.log("播放结束");
                        that.currentPage = Math.floor(myVideo.currentTime);
                        that.pageCount = Math.floor(myVideo.duration);
                        that.finishedVedioStudyMethod();
                    });
                    //使用事件监听方式捕捉事件， 此事件可作为实时监测video 播放状态
                    myVideo.addEventListener(
                        "timeupdate",
                        function () {
                            //用秒数来显示当前播放进度
                            console.log(Math.floor(myVideo.currentTime));
                            that.currentPage = Math.floor(myVideo.currentTime);
                        },
                        false
                    );
                    break;
                default:
            }*/
        },

        beforeRouteLeave(to, from, next) {
            to.params.hasUpdate = this.hasUpdate; //已完成学习，更新课程列表课件的信息
            next();
        },
    }
    ;
</script>

<style lang="scss" scoped>
    .section_common {
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        .detail_info {
            width: 100%;
            padding: 10px;
            background-color: white;
            margin: 10px 0;
            box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.05);
            border-radius: 4px;

            .lesson_info {
                width: 100%;
                display: block;
                margin: 0 auto;

                .lesson_count {
                    margin: 10px 20px;
                    color: gray;
                }
            }

            .title {
                font-size: 20px;
                font-weight: 600;
                border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                padding-bottom: 10px;
            }

            .userinfo {
                width: 100%;
                display: flex;
                flex-flow: row nowrap;
                margin-top: 10px;
                align-items: center;

                .avatar {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    overflow: hidden;
                    border: 1px solid rgba(0, 0, 0, 0.1);

                    img {
                        width: 100%;
                    }
                }

                .name {
                    margin-left: 10px;
                }
            }
        }

        .study_area {
            width: 100%;
            /*height: 2000px;*/
            position: relative;

            video {
                width: 100%;
            }

            .content_detail {
                p {
                    img {
                        width: 100% !important;
                    }
                }
                background: url(http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2021/03/11/1615447700799.png);
                -moz-user-select: none; /*火狐*/
                -webkit-user-select: none; /*webkit浏览器*/
                -ms-user-select: none; /*IE10*/
                -khtml-user-select: none; /*早期浏览器*/
                user-select: none;

            }


            // .watermark {
            //   width: 100%;
            //   min-height: 90%;
            //   position: absolute;
            //   background-color: rgba(0, 0, 0, 0.1);
            //   background: url("../../../assets/logo.png");
            //   opacity: 0.2;
            //   top: 0;
            //   left: 0;
            //   color: rgba(255, 255, 255, 0.5);
            //   font-size: 12px;
            // }
        }

        .good_comment_area {
            width: 100%;
            display: flex;
            flex-flow: column nowrap;

            .good_area {
                display: flex;
                width: 100%;
                flex-flow: column nowrap;
                margin: 70px 0 20px 0;

                .goods {
                    display: flex;
                    justify-content: center;
                    flex-flow: column nowrap;
                    align-items: center;
                    font-size: 30px;
                    margin: 10px 0;
                    width: 100%;

                    .fa {
                        cursor: pointer;
                    }

                    span {
                        font-size: 14px;
                        margin-left: 10px;
                    }
                }

                .goods_member {
                    display: flex;
                    flex-flow: row wrap;
                    width: 100%;
                    justify-content: center;
                    align-items: center;

                    img {
                        width: 30px;
                        height: 30px;
                        border-radius: 50%;
                        padding: 2px;
                        border: 1px solid #ccc;
                        margin: 0 5px 5px 0;
                    }
                }
            }

            .comment_area {
                width: 100%;
                display: flex;
                flex-flow: column nowrap;
                background-color: white;

                .comment_input {
                    width: 100%;
                    display: flex;
                    flex-flow: row nowrap;

                    textarea {
                        flex: 1;
                        min-height: 100px;
                        border: none;
                        border: 1px solid rgba(0, 0, 0, 0.1);
                        padding: 10px;
                    }

                    padding: 20px;
                }
            }
        }

        .right_bottom_controller {
            position: fixed;
            z-index: 100000;
            right: 50px;
            bottom: 100px;
            display: flex;
            flex-flow: column nowrap;

            & > i {
                padding: 10px;
                background-color: white;
                margin-bottom: 2px;
                font-size: 20px;
                border: 1px solid rgba(0, 0, 0, 0.1);
            }
        }

        .question_radio_class {
            line-height: 30px;
            white-space: normal;
            word-break: break-all;
        }
    }


</style>
